<template>
  <el-form label-width="100"  :model="Model" :rules="rules">
      <el-form-item label="原始密码" prop="oldPwd" >
          <el-input  v-model="Model.oldPwd"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" show-password  v-model="Model.newPwd"  ></el-input>
      </el-form-item>
     <el-form-item label="新密码确认" prop="newpwdConfirm">
      <el-input type="password" v-model="Model.newpwdConfirm"  show-password ></el-input>
     </el-form-item>
     <el-form-item>
      <el-button  @click="pwdChange"  type="primary">确认</el-button>
     </el-form-item>
  </el-form>    
  </template>
  <script setup lang="ts">
  import {ref} from "vue"
  import {UserApi} from '@/api'
  
  const Model=ref<HttpPayload.Pwd>({
      oldPwd:'',
      newPwd:'',
      newpwdConfirm:'',
  })
  
  const pwdChange=async()=>{
      try{
        const i=await UserApi.pwdchange(Model.value)
        console.log(i)
      }catch(e){/**/}
  }
  const rules={
      oldPwd: [
          { required: true, message: "原密码不能为空", trigger: "blur" },
          { min: 3, max: 20, message: "长度为3-20", trigger: "blur" }
      ],
      newPwd:[
          {required:true,message:'用户密码不能为空',trigger:'blur'},
          { min: 3, max: 20, message: "长度为3-20", trigger: "blur" }
      ],
      newpwdConfirm:[
          {require:true,message:'请再次输入密码',trigger:'blur'},
          {validator:(type:any,value:any,callback:any)=>{
              if(value.length<3||value.length>20)
              callback(new Error('密码长度为3-20'))
              else if(value !==Model.value.newPwd)
              callback(new Error('两次输入的密码不一致'))
              else
              callback();
          },
          trigger:"blur"}
      ]
  }
  
  </script>
  <style scoped ang="stylus">
  </style>
  